<!--显示学生成绩-->
<template>
  <div class="table">
    <p class="title"></p>
    <div class="content-el">
      <el-table ref="filterTable" :data="scores" v-loading="loading"
        :header-cell-style="{  color: '#000000',
         fontSize: '14px' }">
        <el-table-column 
          prop="answerDate"
          label="考试日期"
          sortables
          width="300"
          column-key="answerDate"
          :filters="filter"
          :filter-method="filterHandler">
        </el-table-column>
        <el-table-column
          prop="subject"
          label="课程名称"
          width="300"
          filter-placement="bottom-end">
          <template #default="scope">
            <el-tag>{{scope.row.subject}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="etScore" label="考试分数" width="200"></el-table-column>
        <el-table-column label="是否及格" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.etScore>= 60 ? 'success' : 'danger'">{{scope.row.etScore >= 60 ? "及格" : "不及格"}}</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="center" align="middle" class="pagination">
      <el-pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParms.pageNum"
      v-model:limit="queryParms.pageSize"
      @pagination="getList"
    />
      </el-row>
      </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { listStudentScore } from '@/api/student/score/score';
import useUserStore from '@/store/modules/user'


// 模拟数据
const mockScores = [
  { id: 1, subject: '高等数学', etScore: 92, answerDate: '2023-05-15', rating: 4.5 },
  { id: 2, subject: '大学英语', etScore: 85, answerDate: '2023-05-18', rating: 4 },
  { id: 3, subject: '程序设计', etScore: 78, answerDate: '2023-05-20', rating: 3.5 },
  { id: 4, subject: '线性代数', etScore: 65, answerDate: '2023-05-22', rating: 3 },
  { id: 5, subject: '大学物理', etScore: 88, answerDate: '2023-05-25', rating: 4 },
  { id: 6, subject: '数据结构', etScore: 72, answerDate: '2023-05-28', rating: 3.5 },
  { id: 7, subject: '计算机网络', etScore: 59, answerDate: '2023-06-01', rating: 2.5 },
  { id: 8, subject: '操作系统', etScore: 68, answerDate: '2023-06-05', rating: 3 },
  { id: 9, subject: '软件工程', etScore: 76, answerDate: '2023-06-10', rating: 3.5 },
  { id: 10, subject: '数据库原理', etScore: 81, answerDate: '2023-06-15', rating: 4 },
];

// 响应式数据
const scores = ref([]);
const loading = ref(true);
const filterSubject = ref('');
const filterStatus = ref('');
const userStore = useUserStore()
const filter=ref([])

const total = ref(0);
const queryParms = ref({
  pageNum: 1,
  pageSize: 10,
});

// 计算属性
const uniqueSubjects = computed(() => {
  return [...new Set(scores.value.map(score => score.subject))];
});

const filteredScores = computed(() => {
  return scores.value
    .filter(score => {
      let matches = true;
      if (filterSubject.value) {
        matches = matches && score.subject === filterSubject.value;
      }
      if (filterStatus.value) {
        if (filterStatus.value === 'pass') {
          matches = matches && score.etScore >= 60;
        } else {
          matches = matches && score.etScore < 60;
        }
      }
      return matches;
    })
    .slice(
      (pagination.current - 1) * pagination.size,
      pagination.current * pagination.size
    );
});

const averageScore = computed(() => {
  if (scores.value.length === 0) return 0;
  const total = scores.value.reduce((sum, score) => sum + score.etScore, 0);
  return total / scores.value.length;
});

const passRate = computed(() => {
  if (scores.value.length === 0) return 0;
  const passCount = scores.value.filter(score => score.etScore >= 60).length;
  return (passCount / scores.value.length) * 100;
});

const maxScore = computed(() => {
  if (scores.value.length === 0) return 0;
  return Math.max(...scores.value.map(score => score.etScore));
});


const getList=()=>{
  loading.value=true;
  listStudentScore({userId:userStore.id,pageNum:queryParms.value.pageNum,pageSize:queryParms.value.pageSize}).then(res=>{
    scores.value=res.rows
    total.value=res.total
    loading.value=false
  })
}

const filterHandler=()=>{

}
// 方法
const formatDate = (dateString) => {
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  return new Date(dateString).toLocaleDateString('zh-CN', options);
};
const getSubjectColor = (subject) => {
  const colors = {
    '高等数学': 'primary',
    '大学英语': 'success',
    '程序设计': 'warning',
    '线性代数': 'info',
    '大学物理': '',
    '数据结构': 'warning',
    '计算机网络': 'info',
    '操作系统': '',
    '软件工程': 'primary',
    '数据库原理': 'success'
  };
  return colors[subject] || 'info';
};
const getEvaluation = (score) => {
  if (score >= 90) return '优秀！继续保持！';
  if (score >= 80) return '良好，有很大的进步空间';
  if (score >= 70) return '中等，需要继续努力';
  if (score >= 60) return '及格，有很大的提升空间';
  return '不及格，需要加强学习';
};
const handleSizeChange = (val) => {
  pagination.size = val;
  pagination.current = 1;
};
const handleCurrentChange = (val) => {
  pagination.current = val;
};

// 生命周期钩子
onMounted(() => {
getList()
});
</script>

<style lang="less" scoped>
.pagination {
  padding-top: 20px;
}
.table {
  width: 980px;
  margin: 0 auto;
  // background-color: red;
  .title {
    margin: 20px;
      width: 100%;
  height: 40px;
  // margin: 20px;
  background-color: #e2e2e2;
  }
}
.app-container {
  background-color: #fff;
}

//表格区域
.content-el {
    padding: 20px;
    background-color: #fff;
    border-radius: 6px;
    width:100%;
    height: 80vh;
  }



::v-deep .el-table  th{
  color: #dbdbdb !important;
}

::v-deep .el-table tr {
  background-color: #fff !important;
  color: #000;
}


</style>
